import { Component, Input, OnInit } from '@angular/core';
import * as d3 from 'd3';
import { using } from 'rxjs';
import { Actor, Panorama } from 'src/classes/entities';
import { node } from 'src/classes/uielements';
import { CommonService } from 'src/services/common.service';
import { DataService } from 'src/services/data.service';
import { StoreService } from 'src/services/store.service';
import { UiService } from 'src/services/ui.service';
import { VisualService } from 'src/services/visual.service';

@Component({
  selector: 'app-panoramaview',
  templateUrl: './panoramaview.component.html',
  styleUrls: ['./panoramaview.component.scss']
})
export class PanoramaviewComponent implements OnInit {

  constructor(private dataservice: DataService, private ui: UiService, private store: StoreService) { }

  ngOnInit(): void {
    //this.init()
  }
  @Input()
  public get target(): Panorama {
    return this.internalTarget;
  }

  public set target(v: Panorama) {
    console.log('pppppppppppppppppppppppppppppppppppppp');
    console.log(v);
    this.internalTarget = v;
  }

  private internalTarget: Panorama = new Panorama();

  private init() {
    let dragrect = () => {
      let svg = d3.select('#canvas')
      return d3.drag()
        .on("start", function (event, node) { //dragstart的监听器
          console.log("拖曳开始");
          console.log(event);
          event.sourceEvent.stopPropagation();
        })
        .on("end", function (d) {  //dragend的监听器
          console.log("搁曳结束");
          //d3.event.sourceEvent.stopPropagation();
        })
        .on("drag", function (event, node) {
          //console.log(d);
          //console.log(d3.pointer(event, node));
          let mx = event.x
          let my = event.y
          let dx = event.dx
          let dy = event.dy

          var t = d3.select(this);
          console.log(t);
          let ts = t.attr("transform")
          let ns = ts.slice(10, ts.length - 1)
          console.log(ns);
          let tl = ns.split(',')
          let nx = Number(tl[0]) + dx
          let ny = Number(tl[1]) + dy
          t.attr("transform", "translate(" + nx + "," + ny + ")")
          //d3.event.sourceEvent.stopPropagation();
        })
    }

    let svg = d3.select('#canvas')
    let g = svg.append('g')
      .attr("transform", "translate(100,250)")
      .attr("style", "cursor:move")
      .on("mouseover", function (event) {
        //var mouse = d3.event;
        console.log(event);

        //mouse.attr('cursor', 'hand')
      })
    g.append('text')
      .text('text')
      .attr("x", 25)
      .attr('y', 25)
      // .attr('text-anchor',"middle")
      .attr('dx', '-.8em')
      .attr('dy', '.35em')

    g.append('text')
      .text('text')
      .attr("x", 50)
      .attr('y', 50)
      .attr('text-anchor', "middle")
      .attr('dy', '.35em')

    g.append('line')
      .attr('x1', 25)
      .attr('y1', 25)
      .attr('x2', 50)
      .attr('y2', 50)
      .attr('stroke', 'black')
    g.call(dragrect())
  }

  onDrop(e: any) {
    console.log(e);
    let index = e.dropIndex;
    const fromIndex = e.dragFromIndex;
    const item = e.dragData.item;

  }

  showfocus() {
    VisualService.showfocusline('#canvas')
  }
  hidefocuse() {
    VisualService.showFocus = false
  }

  addnew() {

    let createdrect = (rect) => {
      let actor = new Actor()

      this.dataservice.addEntity<Actor>(actor)

      let dnode = new node()
      dnode.id = CommonService.getid('uie')
      dnode.dataId = actor.Id
      dnode.text = actor.Name
      dnode.datatype = 'actor'
      this.target.Diagram.nodes.push(dnode)

      VisualService.setUIElementInfo(rect, dnode)
      console.log(rect);
      // rect.attr('dataid', actor.Id)
      // rect.attr('objectid', dnode.objectId)
      // dnode.left = Number(rect.attr('x'))
      // dnode.top = Number(rect.attr('y'))
      // dnode.width = Number(rect.attr('width'))
      // dnode.height = Number(rect.attr('height'))

      //rect.attr('uiobj', (dnode))

      console.log(rect);
    }
    VisualService.drawenable = true
    VisualService.createRect('#canvas', createdrect)


  }
  addactor() {

    let createdrect = (rect) => {
      console.log('XXXXXXXXXXXXXXXXXXXS');
      let actor = new Actor()

      this.dataservice.addEntity<Actor>(actor)

      let dnode = new node()
      dnode.id = CommonService.getid('uie')
      dnode.dataId = actor.Id
      dnode.text = actor.Name
      dnode.datatype = 'actor'
      this.target.Diagram.nodes.push(dnode)

      VisualService.setUIElementInfo(rect, dnode)
      console.log(rect);
      // rect.attr('dataid', actor.Id)
      // rect.attr('objectid', dnode.objectId)
      // dnode.left = Number(rect.attr('x'))
      // dnode.top = Number(rect.attr('y'))
      // dnode.width = Number(rect.attr('width'))
      // dnode.height = Number(rect.attr('height'))

      //rect.attr('uiobj', (dnode))

      console.log(rect);
    }
    VisualService.drawenable = true
    VisualService.createRect('#canvas', createdrect)





  }

  showdiagm() {
    let p = new Panorama()
    VisualService.writeDiagram(p.Diagram, '#canvas')
  }

  save() {

    let p = new Panorama()
    VisualService.writeDiagram(p.Diagram, '#canvas')
    console.log(JSON.stringify(p.Diagram));
    CommonService.save(p.Diagram, 'diagram.json')
  }
  //s = '{"nodes":[{"objectId":"uie202133022332375673","text":"unamed","memo":"","borderfill":"#FFF","boderWidth":3,"fill":"#000","scaleRadius":2,"isactive":false,"dataId":"SEn202133022332375444","datatype":"actor","left":"56","top":"65","width":"172","height":"65","zindex":0,"linkRadius":3}],"links":[],"height":600,"width":800,"selectedId":[]}'
  open() {
    let p = new Panorama()
    CommonService.open('openFile', (s) => {
      p.Diagram = JSON.parse(s)

      //p.Diagram = JSON.parse(this.s)
      VisualService.readDiagram(p.Diagram, '#canvas')
    })
    // var file = document.getElementById('openFile')
    // file.onchange = () => {
    //   CommonService.getFileContent(file, (s) => {
    //     console.log(s);
    //     p.Diagram = JSON.parse(s)

    //     //p.Diagram = JSON.parse(this.s)
    //     VisualService.readDiagram(p.Diagram, '#canvas')
    //   })
    // }
    // file.click()


    // let selectfile = file['files'][0];
    // var name = selectfile.name;//读取选中文件的文件名
    // var size = selectfile.size;//读取选中文件的大小
    // console.log("文件名:" + name + "大小:" + size);
    // const f = new FileReader()

    // f.readAsText(selectfile)
    // f.onload = function (e) {
    //   console.log(e);
    //   return e.target.result

    // }
    // return ''

    // let r = CommonService.open('openFile')
    // if (r !== undefined || r !== '')
    //   p.Diagram = JSON.parse(r)

    // //p.Diagram = JSON.parse(this.s)
    // VisualService.readDiagram(p.Diagram, '#canvas')
  }

  opennew() {
    this.target = new Panorama()
    CommonService.open('openFile', (s) => {
      this.target.Diagram = JSON.parse(s)
      console.log(s);
      //p.Diagram = JSON.parse(this.s)
      //VisualService.readDiagram(this.target.Diagram, '#canvas')
    })




  }
  outmousedown(evt) {
    console.log('out');
  }
  inmousedown(evt) {
    console.log('in');
  }
  line = undefined
  addline() {

    this.line = document.createElementNS("http://www.w3.org/2000/svg", "line");


    this.line.setAttribute("x1", 0);
    this.line.setAttribute("y1", 0);
    this.line.setAttribute("x2", 300);
    this.line.setAttribute("y2", 350);
    this.line.setAttribute("stroke", 'rgb(0,255,255)')
    this.line.setAttribute("stroke-width", 10)


    //this.line.setAttribute("pointer-events", "none")//线不能屏蔽底层的事件响应


    // this.line.setAttribute("onclick", "linkclick($e)")
    let svg = document.getElementById('testsvg')
    console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
    // this.line.onclick = "line_click(evt)"
    // this.line.addEventListener("onclick", function () {
    //   console.log('yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy');
    //   this.activelinkpoint.x = evt.target.getAttribute("x1")
    //   this.activelinkpoint.y = evt.target.getAttribute("y1")
    //   this.activelinkpoint.active = true
    //   this.line = evt.target
    // });
    // this.line.addEventListener("onclick", function () {
    //   alert('圆形点击测试：');
    // });
    // this.line.addEventListener("click", function (e) {
    //   console.log('mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm');
    //   this.testnum = 20
    //   console.log(this);
    //   console.log(this.testnum);
    // });
    this.line.addEventListener("click", this.lc.bind(this));
    svg.appendChild(this.line);
  }
  testnum = 15
  lc(e) {
    console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
    console.log(this.testnum);
  }
  linked(e) {
    console.log('ssssssssssssssssssssssssssssssssssssssssssssss');
  }
  linked1(e) {
    console.log('tttttttttttttttttttttttttttttttttttttttttttttt');
  }
}
